<template>
	<view class="userInfo">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="form.avatarUrl"></image>
		</button>
		<view class="nickname flex">
			<text>昵称</text>
			<input type="nickname" v-model="form.nickName" class="weui-input" placeholder="请输入昵称" />
		</view>
		<button class="btn" type="primary" @click="goBack">保 存</button>
	</view>
</template>

<script>
	import {
		userInfo,
		updateUserInfo,
	} from "@/api/public.js"
	export default {
		data() {
			return {
				form: {
					avatarUrl: "",
					city: "",
					country: "",
					gender: 3,
					nickName: "",
					province: "",
				}
			}
		},


		onShow() {
			this.getUserInfo();
		},
		methods: {
			goBack() {
				this.form.nickName = this.form.nickName ? this.form.nickName : "微信用户";
				this.form.avatarUrl = this.form.avatarUrl ? this.form.avatarUrl:
					"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
				updateUserInfo(this.form).then(res => {
					uni.navigateBack();
				})
			},
			//获取用户
			getUserInfo() {
				let that = this;
				userInfo().then(res => {
					console.log(res)
					if (res.reData.data) {
						that.form.avatarUrl = res.reData.data.head_pic;
						// that.form.nickName = res.reData.data.nickname;
					}
				})
			},
			onChooseAvatar(e) {
				this.form.avatarUrl = e.detail.avatarUrl;
			},


		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		padding-top: 200rpx;
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
	}

	.avatar-wrapper {
		padding: 0;
		width: 150rpx;
		height: 150rpx;

		>image {
			width: 100%;
			height: 100%;
		}
	}

	.nickname {
		padding: 20rpx 40rpx;
		margin-top: 50rpx;
		border-top: 2rpx solid #eee;
		border-bottom: 2rpx solid #eee;

		text {
			margin-right: 150rpx;
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>
